<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.clearfix::after{
				content: '';
				display: table;
				clear: both;
			}
			.wrap{
				width: 1100px;
				margin: 0 auto;
				border: 1px solid #000;
			}
			
			.top, .foot{
				height: 50px;
				background-color: #000;
			}
			.main{
				padding: 0 100px;
				overflow: hidden;
			}
			
			.main .left,
			.main .right,
			.main .content{
				float: left;
				position: relative;
				background-color: green;
				margin-bottom: -2000px;
				padding-bottom: 2000px;
			}
			
			.main .left{
				left: -100px;
				width: 100px;
			}
			
			.main .content{
				width: 100%;
				margin-left: -100px;
				background-color: red;
			}
			
			.main .right{
				width: 100px;
				left: 100px;
				margin-left: -100px;
			}
			
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="top"></div>
			<div class="main clearfix">
				<div class="left">123</div>
				<div class="content">456</div>
				<div class="right">789</div>
			</div>
			<div class="foot"></div>
		</div>
	</body>
</html>
